<%@ include file="/common/taglibs.jsp"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="catalog" tagdir="/WEB-INF/tags/catalog"%>

<head>
	<title><fmt:message key="customer.register.title"/></title>
</head>

<form id="customerRegister" onSubmit="register(this);return false;" action="${ctxPath}/customer/register.html?doAction=save" method="post">
	<div class="register">
		<div class="top"><fmt:message key="customerRegister.title"/></div>
		<div class="content">
			<h3><fmt:message key="customerRegister.body.tip1"/></h3>
			<table border="0" cellspacing="0" cellpadding="0" class="table_register">
				<tr>
					<td colspan="2" >
						<probiz:showBindErrors bindPath="customer.*" />
					</td>
				</tr>
				<tr>
					<th width="15%"><fmt:message key="csCustomer.username" />(<span class="red">*</span>)：</th>
					<td>
						<span>
							<spring:bind path="customer.username">
								<input type="text" name="username"  id="username"
										value="${status.value}" class="inputtxt3" style="width:260px"  />
							</spring:bind>
						</span>
					</td>
				</tr>
				<tr>
					<th><fmt:message key="csCustomer.email" />(<span class="red">*</span>)：</th>
					<td>
						<spring:bind path="customer.email">
							<input type="text" name="email" id="email" value="${status.value}" class="inputtxt3" style="width:260px" />
						</spring:bind>
					</td>
				</tr>
				<tr>
					<th><fmt:message key="customer.appUser.retypeEmail"/>(<span class="red">*</span>)：</th>
					<td>
						<spring:bind path="customer.reEmail">
							<input type="text" name="reEmail" id="reEmail" value="${status.value}" class="inputtxt3" style="width:260px" />
						</spring:bind>
					</td>
				</tr>
				<attribute:list var="customerAttrList" type="Customer" isActive="true"/>
				<c:if test="${not empty customerAttrList}">
					 <c:forEach items="${customerAttrList}" var="attribute">
						<tr>
							<th>
								${attribute.attributeName }
								<c:if test="${attribute.isRequired==1}">(<span class="red">*</span>)</c:if>：
							</th>
							<td>
								<attribute:inputStyle type="${attribute.attributeDataType}"/>
								<attribute:input cssName="${returnClassName}" cssStyle="${returnStyleName}" entity="${customer}" attribute="${attribute}" isdisplayHelp="true"  />
							</td>
						</tr>
					</c:forEach>
				</c:if>
			</table>
			
			<h3><fmt:message key="customerRegister.body.tip2"/></h3>
			<table border="0" cellspacing="0" cellpadding="0" class="table_register" >
				<tr>
					<td colspan="2">
						<span class="gray"><fmt:message key="appUser.password.rule" /></span>
					</td>
				</tr>
				<tr>
					<th width="15%"><fmt:message key="customer.appUser.password"/>(<span class="red">*</span>)：</th>
					<td>
						<input type="password" name="password" id="password" class="inputtxt3" style="width:260px"/> 
					</td>
				</tr>
				<tr>
					<td style="padding:1px;">
					</td>
					<td style="padding:1px;">
						<div id="passStrengthId" ></div>
					</td>
				</tr>
				<tr>
					<th><fmt:message key="customer.appUser.retypePassword" />(<span class="red">*</span>)：</th>
					<td>
						<input id="rePassword" type="password" name="rePassword" class="inputtxt3" style="width:260px" >
					</td>
				</tr>
				<tr>
					<th>&nbsp;</th>
					<td>
						<label><input id="agreeCheckbox" name="" type="checkbox" value="" checked="true"/> <fmt:message key="customerRegister.body.agree" /></label>
						
						<a href="<catalog:contentCategoryUrl categoryCode="agreement"/>" target="_blank">
							<fmt:message key="customer.register.CheckServiceTerm" />
						</a>
					</td>
				</tr>
				<tr>
					<th>&nbsp;</th>
					<td><input id="registerBtn" name="" type="image" src="${txtImagePath}/btn_register.gif" alt="<fmt:message key="customerRegister.button.register" />" /></td>
				</tr>
			</table>
		</div>
	</div>
</form>

<c:set var="plugin_passwordStrength" value="true" scope="request"/>
<c:set var="probizJs_validation" value="true" scope="request"/>
<v:javascript formName="customerRegister" staticJavascript="false"></v:javascript>
<script type="text/javascript">
$j(document).ready(function () {
	__FMTExtend = {
		customer_register_plsCheckServiceTerm:"<fmt:message key="customer.register.plsCheckServiceTerm" />",
		appUser_username_isExist:"<fmt:message key="appUser.username.isExist" />",
		appUser_email_isExist:"<fmt:message key="appUser.email.isExist" />",
		register_wait:"<fmt:message key="register.wait" />"
	};
	$j.extend(__FMT, __FMTExtend); 
});	
$j(document).ready(function () {
	autoApplyValidate($('customerRegister'));
	isNeedSuccess = true;  //需要有验证成功提示
	
	
	<%-----start:账户ajax验证-----%>
	$j("#username").blur(asyncValidateRegisterUsername);
	$j("#email").blur(asyncValidateRegisterEmail);
	<%-----end: 账户ajax验证-----%>
	
	<%-----start:密码强度-----%>
	$j("#password").passStrength({
		userid:	"username",
		locationId: "passStrengthId"
	});
	<%-----end: 密码强度-----%>
	
});
<%--
	验证username和email原理：
	1.填写表单时候使用异步验证。
	2.提交表单后先使用同步验证后再提交。
--%>
/**
* 异步验证账号
**/
function asyncValidateRegisterUsername(event){
	if($j('#username').next('span.success_txt').length>0){
		$j('#username').next('span.success_txt').hide();
		var postData = {"username":$j('#username').val()};
		$j.post(__ctxPath+'/customer/register.html?doAction=checkIsUserExist&decorator=blank',postData,validateRegisterUsernameCallback,"json");
	}
	return false;
}
/**
* 异步验证账号callback
**/
function validateRegisterUsernameCallback(data){
	if(data.isUserNamePass != 1){
		//账号已被使用
		$j('#username').next('span').remove();
		$j('#username').after('<span id="validate_username" class="error_txt" style="width:100%">'+__FMT.appUser_username_isExist+'</span>');
		return false;
	}else{
		$j('#username').next('span.success_txt').show();
		return true;
	}
}
/**
* 异步验证电子邮箱
**/
function asyncValidateRegisterEmail(event){
	if($j('#email').next('span.success_txt').length>0){
		$j('#email').next('span.success_txt').hide();
		var postData = {"email":$j('#email').val()};
		$j.post(__ctxPath+'/customer/register.html?doAction=checkIsEmailExist&decorator=blank',postData,validateRegisterEmailCallback,"json");
	}
	return false;
}
/**
* 异步验证注册电子邮箱callback
**/
function validateRegisterEmailCallback(data){
	if(data.isEmailPass != 1){
		//邮箱已被使用
		$j('#email').next('span').remove();
		$j('#email').after('<span id="validate_email" class="error_txt" style="width:100%">'+__FMT.appUser_email_isExist+'</span>');
		return false;
	}else{
		$j('#email').next('span.success_txt').show();
		return true;
	}
}
/**
* 同步验证账号和注册电子邮箱
**/
function syncValidateRegisterForm(){
	if($j('#username').next('span.success_txt').length>0){
		$j('#username').next('span.success_txt').hide();
	}
	if($j('#email').next('span.success_txt').length>0){
		$j('#email').next('span.success_txt').hide();
	}
	var postData = {"username":$j('#username').val(),"email":$j('#email').val()};
	$j.ajaxSetup({async: false});  
	//先同步验证
	$j.post(__ctxPath+'/customer/register.html?doAction=checkRegisterForm&decorator=blank',postData,syncValidateRegisterFormCallback,"json");
	$j.ajaxSetup({async: true});
}
/**
* 同步验证账号和注册电子邮箱callback
**/
function syncValidateRegisterFormCallback(data){
	var flag = true;
	if(!validateRegisterUsernameCallback(data)){
		flag = false;
	}
	if(!validateRegisterEmailCallback(data)){
		flag = false;
	}
	if(flag){
		registerSubmit($('customerRegister'));
	}else{
		alert(__vaMsg.notPass);
		return false;
	}
}

//提交注册
function register(form) {
	if (!validateCustomerRegister(form)) {
		return false;
	}
	if ($j("#agreeCheckbox").attr("checked") != true) {
		alert(__FMT.customer_register_plsCheckServiceTerm);
		return false;
	}
	syncValidateRegisterForm();
}

//真正提交注册
function registerSubmit(form) {
	$j('#registerBtn').parent().html("<i class='loading'>"+__FMT.register_wait+"</i>");
	form.submit();
	return false;
}

</script>
